<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户地址</title>
    <link href="/css/init.css" rel="stylesheet" type="text/css">
    <link href="/css/user_address.css" rel="stylesheet" type="text/css">
    <link href="/css/load2.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="content">
        <div class="col-main">
            <div class="container">
                <!--左边的盒子-->
                <section class="col-sub">
                    <aside class="mt-menu">
                        <div class="mt-avater">
                            <div class="mt-avatar-box">
                                <a href="javascript:;" class="mt-user-avatar">
                                    <img src="/img/matou.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="mt-menu-tree">
                            <dl class="mt-menu-item">
                                <dt class="qb">全部功能</dt>
                                <dd>
                                    <a href="/car/showCar">我的购物车</a>
                                </dd>
                                <dd class="mt-menu-sub">
                                    <b class="col-sub-b">-</b>
                                    <a href="/user/info/show/orders/all">已买到的商品</a>
                                </dd>
                                <dd>
                                    <a href="/user/info/show">个人信息</a>
                                </dd>
                                <dd>
                                    <a href="/user/info/show/addr">用户收货地址</a>
                                </dd>
                            </dl>
                        </div>
                    </aside>
                </section>
                <div class="main-wrap">
                    <div class="page-index">
                        <div class="head">
                            <div class="shouhuo">
                                <span class="shouhuo-address">收货地址</span>
                            </div>
                        </div>
                        <div class="headTips">
                            <span class="add_address">新增收货地址</span>
                        </div>
                        <div class="dangqian">
                            <div class="peisong">
                                <p class="Chinese_address">当前配送至</p>
                                <span class="name">中国大陆</span>
                            </div>

                                <!--地址信息-->
                            <div class="address_information">
                                <div class="address_information_header">
                                    <span class="address_information_header_span">
                                        <div class="next-form-div">
                                            <label required="">
                                                地址信息：
                                            </label>
                                        </div>
                                    </span>
                                    <div id="distpicker2">
                                        <select></select>
                                        <select></select>
                                        <select></select>
                                    </div>
                                    <!--<div class="select-address">
                                        <span class="select-address-input">
                                            <p class="placeholder">请选择省/市/区/街道</p>
                                        </span>
                                        <span class="icon"></span>
                                    </div>-->
                                </div>
                            </div>
                            <!--详细地址-->
                            <div class="address_information">
                                <div class="address_information_header">
                                    <span class="address_information_header_span">
                                        <div class="next-form-div">
                                            <label required="">
                                                详细地址：
                                            </label>
                                        </div>
                                    </span>
                                    <div class="select-address-area">
                                        <textarea cols="20" rows="2" class="detailed_address" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="error-msg">请填写详细地址</div>
                        </div>
                        <form class="next-form">
                            <!--收货人姓名-->
                            <div class="name_information">
                                <div class="address_information_header">
                                    <span class="address_information_header_span">
                                        <div class="next-form-div">
                                            <label required="">
                                                收货人姓名：
                                            </label>
                                        </div>
                                    </span>
                                    <div class="user-name">
                                        <span class="name-len">
                                            <input type="text" class="name-len-input" placeholder="长度不超过25个字符">
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="error-msg">收货人姓名应为2-25个字符，一个汉字为两个字符</div>
                            <!--手机号码-->
                            <div class="phone_information">
                                <div class="address_information_header">
                                    <span class="address_information_header_span">
                                        <div class="next-form-div">
                                            <label required="">
                                                手机号码：
                                            </label>
                                        </div>
                                    </span>
                                    <div class="mobile-number">
                                        <span class="mobile">
                                            <input type="text" placeholder="电话号码、手机号码必须填一项">
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="error-msg">6-20个数字</div>
                           <!-- <div class="set-default">
                                <div class="set-default-address">
                                    <label class="next-checkbox-wrapper">
                                        <span class="next-checkbox">
                                            <span class="next-checkbox-inner">
                                                <input class="qxbox" value="false" type="checkbox">
                                                <label class="no_check" check="1"></label>
                                            </span>
                                            <span class="next-checkbox-label">设置为默认收货地址</span>
                                        </span>
                                    </label>
                                </div>
                                <div class="help"></div>
                            </div>-->
                            <div class="baocun">
                                <button type="button" class="sure">保存</button>
                            </div>
                        </form>
                    <div class="addresslist">
                        <div class="next-message"></div>
                        <!--表格-->
                        <div class="next-table">
                            <table>
                                <colgroup>
                                    <col style="width: 70px;">
                                    <col>
                                    <col style="width: 200px;">
                                    <col style="width: 100px;">
                                    <col style="width: 140px;">
                                    <col style="width: 110px;">
                                    <col style="width: 90px;">
                                </colgroup>
                                <thead class="next-table-header">
                                    <tr>
                                        <th class="next-table-cell">
                                            <div class="next-table-cell-wrapper">收货人</div>
                                        </th>
                                        <th class="next-table-cell">
                                            <div class="next-table-cell-wrapper">所在地区</div>
                                        </th>
                                        <th class="next-table-cell">
                                            <div class="next-table-cell-wrapper">详细地址</div>
                                        </th>
                                      <!--  <th class="next-table-cell">
                                            <div class="next-table-cell-wrapper">邮编</div>
                                        </th>-->
                                        <th class="next-table-cell">
                                            <div class="next-table-cell-wrapper">电话/手机</div>
                                        </th>
                                        <th class="next-table-cell">
                                            <div class="next-table-cell-wrapper">操作</div>
                                        </th>
                                    </tr>
                                </thead>

                                <tbody class="next-table-body">

                                    <!--/*/ <th:block th:each="addr :${info }"> /*/-->
                                    <tr class="next-table-row">
                                        <td class="next-table-cell">
                                            <div class="next-table-cell-wrapper" th:text="${addr.name}">XXX</div>
                                        </td>
                                        <td class="next-table-cell">
                                            <div class="next-table-cell-wrapper">
                                                <span >[[${addr.province}]][[${addr.city}]][[${addr.district}]]</span>
                                            </div>
                                        </td>
                                        <td class="next-table-cell">
                                            <div class="next-table-cell-wrapper" th:text="${addr.address}">大西路287-1号清文化主题酒店</div>
                                        </td>
                                        <!--<td class="next-table-cell">
                                            <div class="next-table-cell-wrapper">310000</div>
                                        </td>-->
                                        <td class="next-table-cell">
                                            <div class="next-table-cell-wrapper">
                                                <span th:text="${addr.iphone}">86-15*******55</span>
                                                <br>
                                            </div>
                                        </td>
                                        <td class="next-table-cell">
                                            <div class="next-table-cell-wrapper">
                                                <div class="tAction">
                                                    <a href="javascript:;" class="t-change">修改</a>
                                                    <span class="t-line">|</span>
                                                    <a href="javascript:;" th:attr="aid=${addr.aid}" id="del"><span class="t-delete">删除</span></a>
                                                </div>
                                            </div>
                                        </td>

                                        <!--<td class="next-table-cell">
                                            &lt;!&ndash;<div class="next-table-cell-wrapper">
                                                <div>
                                                    <span class="t-default">默认地址</span>
                                                </div>
                                            </div>&ndash;&gt;
                                        </td>-->
                                    </tr>
                                    <!--/*/ </th:block> /*/-->
                                <!--------------------------------------------------------------------->


                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </div>
    </div>
    <div id="load">
        <div class="loadEffect">
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
        </div>
    </div>
    <div id="zz">

    </div>
        <script src="/js/jquery-1.12.4.js"></script>
        <script src="/js/distpicker.data.js"></script>
        <script src="/js/distpicker.js"></script>
        <script src="/js/main.js"></script>
        <script src="/popBox/layer.js"></script>
        <script>
            $(function(){
                $("tbody").on("click","#del",function () {
                    $("#load").fadeIn();
                    $("#zz").fadeIn();
                    layer.confirm('您确定到删除该地址吗？', {
                        btn: ['删除','取消'] //按钮
                    }, function(){
                        layer.msg('正在删除..', { time: 1000,icon: 1});
                        $.post("/user/info/show/addr/del",{aid:$(this).attr("aid")},data => {
                            console.log(data.code);
                            if(data.code==200){
                                $(this).parent().parent().parent().parent().remove();
                            }else{

                            }
                            $("#load").fadeOut();
                            $("#zz").fadeOut();
                        })
                    }, function(){
                        layer.msg('你取消了删除地址操作', {
                            time: 20000, //20s后自动关闭
                            btn: [ '知道了']
                        });
                    });
                });
                $("#distpicker2").distpicker({
                    province: "---- 所在省 ----",
                    city: "---- 所在市 ----",
                    district: "---- 所在区 ----"
                });
                $(".next-checkbox-inner label").on("click",function(){
                    if($(this).attr("check")==1){
                        if($(this).hasClass("no_check")){
                            $(this).removeClass("no_check");
                        }
                        $(this).addClass("check");
                        $(this).attr("check",0);
                    }else{
                        if($(this).hasClass("check")){
                            $(this).removeClass("check");
                        }
                        $(this).addClass("no_check");
                        $(this).attr("check",1);
                    }
                });
                $(".sure").on("click",function () {
                    // 显示加载
                    $("#load").fadeIn();
                    $("#zz").fadeIn();
                    const $select =  $("#distpicker2>select");
                    const province = $select.eq(0).val();
                    const city = $select.eq(1).val();
                    const district =  $select.eq(2).val();
                    const address = $(".detailed_address").val();
                    const name = $(".name-len-input").val();
                    const iphone =$(".mobile>input").val();
                    console.log(province);
                    if(province ==  "" || city =="" || district=="" ){
                        layer.msg("请选择省市区", {
                            time: 2000, //20s后自动关闭
                        });
                    }else if(address == "" || name=="" || iphone==""){
                        layer.msg("必选项不能为空", {
                            time: 2000, //20s后自动关闭
                        });
                    }else{
                        $.ajax({
                            //async:false,
                            url:"/user/info/add/addr",
                            dataType:"json",
                            type:"POST",
                            data: {
                                province:province,
                                city:city,
                                district:district,
                                address:address,
                                name:name,
                                iphone:iphone
                            },
                            success:function (data) {
                                if(data.code == 200){
                                   /* layer.msg("地址添加成功", {
                                        time: 2000,
                                    });*/
                                }
                                /*var delUrl  = "/user/info/show/addr/del/"+data.aid;*/
                                var html = "<tr class=\"next-table-row\">\n" +
                                    "                                        <td class=\"next-table-cell\">\n" +
                                    "                                            <div class=\"next-table-cell-wrapper\">"+name+"</div>\n" +
                                    "                                        </td>\n" +
                                    "                                        <td class=\"next-table-cell\">\n" +
                                    "                                            <div class=\"next-table-cell-wrapper\">\n" +
                                    "                                                <span>"+province+" "+city+" "+district+"</span>\n" +
                                    "                                            </div>\n" +
                                    "                                        </td>\n" +
                                    "                                        <td class=\"next-table-cell\">\n" +
                                    "                                            <div class=\"next-table-cell-wrapper\">"+address+"</div>\n" +
                                    "                                        </td>\n" +
                                    "                                        <td class=\"next-table-cell\">\n" +
                                    "                                            <div class=\"next-table-cell-wrapper\">\n" +
                                    "                                                <span>"+new String(iphone).replace(/^(.{3})(.*)(.{4})$/,"$1*****$3")+"</span>\n" +
                                    "                                                <br>\n" +
                                    "                                            </div>\n" +
                                    "                                        </td>\n" +
                                    "                                        <td class=\"next-table-cell\">\n" +
                                    "                                            <div class=\"next-table-cell-wrapper\">\n" +
                                    "                                                <div class=\"tAction\">\n" +
                                    "                                                    <a href=\"javascript:;\" class=\"t-change\">修改</a>\n" +
                                    "                                                    <span class=\"t-line\">|</span>\n" +
                                    "                                                    <a id='del'><span class=\"t-delete\">删除</span></a>\n" +
                                    "                                                </div>\n" +
                                    "                                            </div>\n" +
                                    "                                        </td>";
                                $(html).find("#del").attr("aid",data.aid).end()
                                    .appendTo("tbody");

                                $(".detailed_address").val("");
                                $(".name-len-input").val("");
                                $(".mobile>input").val("");
                                // 结束加载
                                $("#load").fadeOut();
                                $("#zz").fadeOut()
                            }
                        });
                    }


                });
            });
        </script>
</body>
</html>